前言

作为一个IT技术人员,自然离不开技术的积累,而技术的积累则通过文档或代码的形式呈现出来。好记性不如烂笔头,程序员应该乐于并擅于记录总结工作中遇到的各种问题、工作成果、奇思异想和感悟等。

程序员的世界是孤独的,但也是充满激情和阳光的。正是开源精神点亮了这一切。生命中最美丽的报偿之一便是帮助他人的同时,也帮助了自己 ─ 罗夫‧瓦尔多‧爱默生

因此,将个人的经验和感悟与他人分享,成就的不仅仅是个人,更可以帮助其他人少走弯路。那么就开始分享的旅程吧!

传统的笔记或者blog平台

在本地可以用各种文档格式保存自己的技术积累,也可以采用一些市面上的blog平台作为载体来存储自己的技术文章,但这类方式存在一些弊端,这点你可以打开你的脑洞,想想有哪些,本人不是来挑起舌战的。

Github pages+Hexo+Nodejs搭建个人blog

好处和缺点这里就暂不提了,请自行google。(本文仅仅是提供一种搭建Blog的方式,不牵涉任何利益方!!!)

步骤如下:

  1. 安装git:git下载,注意:Windows平台需要下载对应的安装exe,安装之后后续的命令行操作需要在GitShell中打开而非Windows默认的命令行。不过,建议直接下载Github windows客户端,安装的时候会创建GitShell(正是下文提及的GitShell)和GitHub GUI工具。
  2. 安装nodejs:node.js官网,注意:请根据自己主机的平台下载对应版本。
  3. 安装hexo及部署:hexo官网,注意:安装 Hexo 相当简单。然而在安装前,您必须确保先完成步骤1和2。Hexo网站可以选择语言为简体中文,方便使用。查看其中的文档可以看到hexo的详细使用说明,so easy!

重点阐述下步骤3的过程(hexo的详细信息可参加hexo说明文档):

安装hexo

在Gitshell(已经安装了git并且将git加入到path环境变量中)输入:

$ npm install -g hexo-cli

建站

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹(自行选定的文件夹folder)中新建所需要的文件。

$ hexo init folder
$ cd folder
$ npm install

新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml
网站的 配置 信息,您可以在此配置大部分的参数。

package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.0.0",
"hexo-generator-archive": "^0.1.0",
"hexo-generator-category": "^0.1.0",
"hexo-generator-index": "^0.1.0",
"hexo-generator-tag": "^0.1.0",
"hexo-renderer-ejs": "^0.1.0",
"hexo-renderer-stylus": "^0.2.0",
"hexo-renderer-marked": "^0.2.4",
"hexo-server": "^0.1.2"
}
}

scaffolds
模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

source
资源文件夹是存放用户资源的地方。除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes
主题 文件夹。Hexo 会根据主题来生成静态页面。

本地启动server

该步骤可以检验安装是否ok。如果能成功,那么恭喜你离成功更近一步了。

在Gitshell中进入前面指定的folder(建立的站点的根目录),输入:

$ hexo server

可以观察命令行的输出,然后通过浏览器打开http://localhost:4000/,成功的情况下则会看到默认的欢迎页面。

部署到github pages

(点击了解Github Pages)

Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。

$ hexo deploy

在开始之前,您必须先在站点的配置文件_config.yml(前面建立的folder目录下)中修改参数,一个正确的部署配置中至少要有 type 参数,例如:

1
2
deploy:
type: git

您可同时使用多个 deployer,Hexo 会依照顺序执行每个 deployer。

1
2
3
4
5
deploy:
type: git
repo:
type: heroku
repo:

这里重点提及部署到Github pages的方法(步骤)。

a.首先在Github上面创建一个新的Repository,仓库命名格式为yourname.github.io,注意:yourname是你自己定义的一个名称,后面的github.io是统一的,格式一定需要符合这个样式。
b.然后,配置文件_config.yml

1
2
3
4
5
deploy:
type: git
repository: git@github.com:your_github_account/yourname.github.io.git
branch: master
message: [message]

说明:

参数 描述
repo 库(Repository)地址
branch 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。
message 自定义提交信息

eg(我的Github账号是cstsinghua,而我新建的仓库名称是cstsinghua.github.io):

1
2
3
4
deploy:
type: git
repository: git@github.com:cstsinghua/cstsinghua.github.io.git
branch: master

注意:如果是建立项目网站,则branch需要修改为gh-pages,详细情况请参见Github pages中User, Organization, and Project Pages的差异

c.安装hexo的git插件hexo-deployer-git

$ npm install hexo-deployer-git –save

d.部署前面建立的站点(folder下面的内容):

执行完,开始部署,即先hexo generate,然后hexo deploy。也可以一步到位:hexo d -g

$ hexo clean
$ hexo generate
$ hexo deploy

或者:

$ hexo d -g

注意:在这一步可能报错,已知的一些错误可以参见hexo git部署常见问题

另外,可能遇到SSH publickey接入问题,可以参见创建github SSH keygithub SSH key管理

(optional)重绑定域名

Custom domain redirects for GitHub Pages sites(将独立(个性)域名与GitHub Pages的空间域名绑定)

yourname.github.io的域名格式比较固定,那么是否可以设置一个个性化的域名呢,另外需要注意的是Github pages的容量受限于github的要求,目前是1GB(请参见https://help.github.com/articles/what-are-github-pages/)。因此,建立一个独立的个性化(blog)网站(域名是个性化独立的,容量也可以调整),在某些情况下还是有必要的(请参见github pages域名重定向)。

  • Github pages 设置:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,如cstsinghua.me。

  • DNS设置:注册DNSpod,添加域名,不是必要的步骤,但是据说可以提高解析效率。本人没有测试。

  • 在域名服务商,如net.cn中修改增加两条A记录,指向github pages 提供的 ip
    192.30.252.153
    192.30.252.154

推广

一旦成功创建属于自己的blog,当然是想与他人分享,让小伙伴们都可以搜索到或者浏览自己的成果。很不幸的是,采用本文方式创建的blog默认情况下只会静静躺在互联网的一个角落,google或者百度等搜索引擎是无法知晓它的存在。因此,我们必须采用一些方式来推广自己的blog,让其他人能够通过Google或者百度等搜索引擎搜索到我们blog。

  • 先验证博客是否被搜索引擎收录

    在百度或者谷歌上面输入下面格式来判断,如果能搜索到就说明被收录,否则就没有,用你的域名替代我的cstsinghua.github.io

    site:cstsinghua.github.io

    如下图:

    如果已被搜索引擎收录,那恭喜你,可以不用看后面的内容了。你的blog已经在互联网上飘香四溢。

  • 在google和百度的站长管理平台验证并添加blog地址

    Google站长管理平台地址

    百度站长管理平台地址

    这里以Google为例(百度的类似):

    1.登录google站长管理平台,在首页中点击”添加属性”按钮,然后将你的blog地址填写并添加,如下图所示:

    2.blog网址添加完成之后,会跳转到验证所有权页面,验证方式有很多种,可以根据自己的情况选择,这里选择推荐的方法,即上传HTML文件的方式,其步骤在跳转的页面写得很清楚,按部就班地操作就行了(注意:先点击下载页面提示的HTML文件,报错)。如下图所示:

    3.生成并提交站点地图(sitemap.xml)
    站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知Google和其他搜索引擎。Googlebot等搜索引擎网页抓取工具会读取此文件,以便更加智能地抓取您的网站。

    怎么生成blog网站的站点地图呢?方式有很多种,hexo本身也自带了生成站点地图的插件。我们要先安装插件,打开你的hexo博客根目录,分别用下面两个命令来安装针对谷歌和百度的插件:

    npm install hexo-generator-sitemap –save

    npm install hexo-generator-baidu-sitemap –save

    在blog根目录的配置文件_config.yml中添加如下代码

    1
    2
    3
    4
    sitemap:
    path: sitemap.xml
    baidusitemap:
    path: baidusitemap.xml

    然后,修改blog根目录的配置文件_config.yml中url参数为你blog的地址,比如我的是这样:

    1
    2
    3
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://cstsinghua.github.io/

    此时,可以重新生成你的blog

    hexo g

    如果你在你的blog根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了。当然可以采用其他很多方式来生成sitemap.xml,网上也有很多在线工具或者提供下载的本地GUI工具来生成,可以参见https://code.google.com/archive/p/sitemap-generators/wikis/SitemapGenerators.wiki,里面提供了非常多的链接地址,本人使用过https://xmlsitemapgenerator.org在线生成过。

    最后,将生成的sitemap.xml提交到google站长管理平台,如下图所示:

    蓝色表示sitem.xml里面上传的网页数,橙色表示已经被google加入索引(收录)的网页数,一旦被收录,这个时候就可以在google上面搜索到blog了!关于细节可以点击google站长页面上的帮助进行了解。